<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
<script type="text/javascript" src="js/commen.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var available = false;
	$('#username').blur(function(){
		if($('#username').val().length == 0 || $('#username').val().length > 20){
			$('#hint_1').text('Username must be less than 20 letters and not be empty.');
		}else{
			$.getJSON('register.service', {
				action : 'check',
				username : $('#username').val()
			})
			.success(function(data){
				available = data.available=='yes';
				$('#hint_1').text(available ? '' : 'Username is unavailable.');
			})
			.error(ajaxErrorHandler);
		}
		
	});
	
	$('#password').blur(function(){
		if($('#password').val().length==0){
			$('#hint_2').text('Password must not be empty.');
		}else{
			$('#hint_2').text('');
		}
	});
	
	$('#confirm').blur(function(){
		if($('#password').val()!=$('#confirm').val()){
			$('#hint_3').text('Please confirm your password.');
		}else{
			$('#hint_3').text('');
		}
	});
	
	$('#ok').click(function(){
		if($('#username').val().length==0 || $('#password').val()==0){
			alert('Please fill in your username and password.');
		}else if(available){
			$.blockUI();
			$.getJSON('register.service', {
				action : 'register',
				username : $('#username').val(),
				password : $('#password').val()
			})
			.success(function(data){
				if(data.status=='OK'){
					login($('#username').val(), $('#password').val(), 'manual');
				}else{
					alert('Register failed.');
				}
			})
			.error(ajaxErrorHandler)
			.complete(ajaxCompleteHandler);
		}else{
			alert('Please choose another username.');
		}
	});
});
</script>
<label for="username">Username:</label><input id="username" type="text" /><div id="hint_1"></div>
<label for="password">Password:</label><input id="password" type="password" /><div id="hint_2"></div>
<label for="confirm">Confirm password:</label><input id="confirm" type="password" /><div id="hint_3"></div>
<input id="ok" type="button" value="OK" />